<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多层波形图</title>
    <!-- 引入 ECharts -->
    <script src="echarts.min.js"></script>
</head>
<body>
<!-- 创建一个容器用于放置图表 -->
<div id="chart" style="width: 800px; height: 400px;"></div>

<script>
    // 各个分层的音频数据数组，包含音频的振幅值和时间点
    var audioData = [
        [[0, 0.2], [1, 0.3], [2, 0.5], [3, 0.6], [4, 0.4], [5, 0.1], [6, 0.2], [7, 0.3]], // 第一层
        [[0, 0.1], [1, 0.2], [2, 0.3], [3, 0.4], [4, 0.2], [5, 0.1], [6, 0.2], [7, 0.3]], // 第二层
        [[0, 0.4], [1, 0.5], [2, 0.6], [3, 0.5], [4, 0.3], [5, 0.2], [6, 0.3], [7, 0.4]], // 第三层
        // 更多层...
    ]; // 示例数据

    // 使用 ECharts 初始化图表
    var chart = echarts.init(document.getElementById('chart'));

    // 配置图表的选项和数据
    // var option = {
    //     title: {
    //         text: '多层波形图'
    //     },
    //     tooltip: {},
    //     xAxis: {
    //         type: 'value',
    //         axisLabel: {
    //             formatter: '{value} s'
    //         }
    //     },
    //     yAxis: {
    //         type: 'value',
    //         axisLabel: {
    //             formatter: '{value} V'
    //         }
    //     },
    //     series: []
    // };

    option = {
        animation: false,
        grid: {
            top: 40,
            left: 50,
            right: 40,
            bottom: 50
        },
        xAxis: {
            name: 'x',
            minorTick: {
                show: true
            },
            minorSplitLine: {
                show: false
            }
        },
        yAxis: {
            name: 'y',
            min: -100,
            max: 100,
            minorTick: {
                show: true
            },
            minorSplitLine: {
                show: false
            }
        },
        dataZoom: [
            {
                show: true,
                type: 'inside',
                filterMode: 'none',
                xAxisIndex: [0],
                startValue: -50,
                endValue: 50
            },
            {
                show: true,
                type: 'inside',
                filterMode: 'none',
                yAxisIndex: [0],
                startValue: -50,
                endValue: 50
            }
        ],
        series: [
            {
                type: 'line',
                showSymbol: false,
                clip: true,
                data: generateData()
            }
        ]
    };

    function generateData() {
        let data = [];
        for (let i = -100; i <= 100; i += 0.1) {
            data.push([i, func(i)]);
        }
        return data;
    }

    function func(x) {
        x /= 10;
        return Math.sin(x) * Math.cos(x * 2 + 1) * Math.sin(x * 3 + 2) * 50;
    }

    // 将配置项设置给图表
    chart.setOption(option);
</script>
</body>
</html>
